<template>
  <Modal ok-text="确定" cancel-text="取消" title="请在空白处签名" @cancel="close"
         :visible="visible" :width="570" style="width: 270px">
    <VueSignaturePad ref="VueSignaturePad" :options="signaturePadOptions"/>
    <template slot="footer">
      <div>
        <Button type="danger" @click="clear">清空</Button>
        <Button @click="close">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </template>
  </Modal>
</template>
<script>
import {Button, Modal, notification} from 'ant-design-vue';
import {createModelProps} from '@/utils';
import {VueSignaturePad} from 'vue-signature-pad';

export default {
  name: 'FlowUserSignModal',
  components: {
    Modal, VueSignaturePad, Button
  },
  model: createModelProps(),
  props: {
    value: createModelProps(),
  },
  data() {
    return {
      signaturePadOptions: {
        penColor: '#000',
        minWidth: 1,
        maxWidth: 3,
      },
      visible: false
    };
  },
  methods: {
    ok() {
      let {data, isEmpty} = this.$refs.VueSignaturePad.saveSignature();
      if (isEmpty) {
        notification.warn({message: '请签名'});
        return;
      }
      this.value.userSign = data;
      this.$emit('ok');
      this.close();
    },
    clear() {
      this.$refs.VueSignaturePad.clearSignature();
    },
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
  }
};
</script>2